無障礙網頁是什麼

首先來介紹無障礙網頁的概念，無障礙網頁並不只是像我們生活中常聽到的無障礙廁所、無障礙空間等給身心障礙人士使用的服務，而是泛指盡可能讓更多人去瀏覽你的網站。因此除了上述提到的身心較不自由的族群以外，使用行動裝置(平板、手機)、或是網速較低的也是無障礙網頁的服務對象。

W3c針對無障礙網頁，訂出了詳盡的規範文件Web Content Accessibility Guidelines，有興趣和很閒的人可以研究一下(?
React針對這份文件，提出許多可以符合無障礙網頁的相關HTML標籤。

WAI-ARIA

React支援所有的**aria-.**標籤，使用時須注意寫法為連字符號結合，而非React常見的駝峰式命名。

<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

Semantic HTML

Semantic HTML(行內文字語義化)是無障礙網頁的基礎，使用不同的HTML標籤讓連覽器能正確讀取網站內容，增加網站的曝光度的同時，一般使用者能更簡單的造訪網站。

有時候為了將react元素渲染到html架構裡，常常會在外層包覆<div>標籤，但這會讓部分架構不合乎HTML規範，如（<ol>、<ul>、<dl>、<table>等），這時候可以使用React Fragment將數個HTML元素包在一起。
Fragment留待日後再做講解。

import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}